<template>
  <div id="tablefour" style="width: 100%; height: 500px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["myStart", "myEnd", "myType"],
  data() {
    return {
      start: this.myStart,
      end: this.myEnd,
      type: this.myType,
      data: [],
    };
  },
  mounted() {
    //   this.$nextTick(() => {
    //     this.drawChart();
    //   })
    if (this.type == 1) {
      console.log("draw benkesheng");
    } else if (this.type == 2) {
      console.log("draw yanjiusheng");
    }
    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });

        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];
        this.initData(this.start, this.end);
      });
    } else {
      this.initData(this.start, this.end);
    }
  },
  watch: {
    myType(val) {
      this.type = val;
    },
  },
  methods: {
    count_kind(data) {
      let beijing = 0;
      let hubei = 0;
      let guangdong = 0;
      let zhejiang = 0;
      let henan = 0;
      let hunan = 0;
      let chongqin = 0;
      let anhui = 0;
      let sichuan = 0;
      let shandong = 0;
      let jilin = 0;
      let fujian = 0;
      let jiangxi = 0;
      let jiangsu = 0;
      let shanghai = 0;
      let guangxi = 0;
      let hainan = 0;
      let shanxi = 0;
      let hebei = 0;
      let heilongjiang = 0;
      let liaoning = 0;
      let yunnan = 0;
      let tianjin = 0;
      let shan_xi = 0;
      let gansu = 0;
      let neimenggu = 0;
      let taiwan = 0;
      let aomen = 0;
      let xianggang = 0;
      let guizhou = 0;
      let xizang = 0;
      let qinghai = 0;
      let xinjiang = 0;
      let ningxia = 0;
      let sum = 0;
      for (let i in data) {
        let cur = data[i]["term"];
        let num = data[i]["num"];
        if (cur == "北京") {
          beijing += num;
        } else if (cur == "湖北") {
          hubei += num;
        } else if (cur == "广东") {
          guangdong += num;
        } else if (cur == "浙江") {
          zhejiang += num;
        } else if (cur == "河南") {
          henan += num;
        } else if (cur == "湖南") {
          hunan += num;
        } else if (cur == "重庆") {
          chongqin += num;
        } else if (cur == "安徽") {
          anhui += num;
        } else if (cur == "四川") {
          sichuan += num;
        } else if (cur == "山东") {
          shandong += num;
        } else if (cur == "吉林") {
          jilin += num;
        } else if (cur == "福建") {
          fujian += num;
        } else if (cur == "江西") {
          jiangxi += num;
        } else if (cur == "江苏") {
          jiangsu += num;
        } else if (cur == "上海") {
          shanghai += num;
        } else if (cur == "⼴⻄") {
          guangxi += num;
        } else if (cur == "海南") {
          hainan += num;
        } else if (cur == "陕西") {
          shanxi += num;
        } else if (cur == "河北") {
          hebei += num;
        } else if (cur == "黑龙江") {
          heilongjiang += num;
        } else if (cur == "辽宁") {
          liaoning += num;
        } else if (cur == "云南") {
          yunnan += num;
        } else if (cur == "天津") {
          tianjin += num;
        } else if (cur == "山西") {
          shan_xi += num;
        } else if (cur == "甘肃") {
          gansu += num;
        } else if (cur == "内蒙古") {
          neimenggu += num;
        } else if (cur == "台湾") {
          taiwan += num;
        } else if (cur == "澳门") {
          aomen += num;
        } else if (cur == "香港") {
          xianggang += num;
        } else if (cur == "贵州") {
          guizhou += num;
        } else if (cur == "西藏") {
          xizang += num;
        } else if (cur == "青海") {
          qinghai += num;
        } else if (cur == "新疆") {
          xinjiang += num;
        } else if (cur == "宁夏") {
          ningxia += num;
        } else {
          console.log(cur);
          console.log(num);
        }
        sum += num;
      }
      return [
        beijing,
        hubei,
        guangdong,
        zhejiang,
        henan,

        hunan,
        chongqin,
        anhui,
        sichuan,
        shandong,

        jilin,
        fujian,
        jiangxi,
        jiangsu,
        shanghai,

        guangxi,
        hainan,
        shanxi,
        hebei,
        heilongjiang,

        liaoning,
        yunnan,
        tianjin,
        shan_xi,
        gansu,

        neimenggu,
        taiwan,
        aomen,
        xianggang,
        guizhou,

        xizang,
        qinghai,
        xinjiang,
        ningxia,
      ];
    },
    initData(start, end) {
      this.axios({
        url: "grad/org_location",
        method: "get",
        params: {
          start: this.start,
          end: this.end,
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      })
        .then((res) => {
          //  调整成输出格式
          let region = [
            "北京",
            "湖北",
            "广东",
            "浙江",
            "河南",
            "湖南",
            "重庆",
            "安徽",
            "四川",
            "山东",
            "吉林",
            "福建",
            "江西",
            "江苏",
            "上海",
            "广西",
            "海南",
            "陕西",
            "河北",
            "黑龙江",
            "辽宁",
            "云南",
            "天津",
            "山西",
            "甘肃",
            "内蒙古",
            "台湾",
            "澳门",
            "香港",
            "贵州",
            "西藏",
            "青海",
            "新疆",
            "宁夏",
          ];
          let temp_data_1 = [];
          if (this.type == 1) {
            //本科生
            temp_data_1 = res.data.data.bachelor;
          } else {
            //研究生
            temp_data_1 = res.data.data.master;
          }
          let temp_data = this.count_kind(temp_data_1);
          let result = [];
          let sum = 0;
          // 存储为字典 方便排序
          for (let i in region) {
            let temp = {};
            temp.region = region[i];
            temp.num = temp_data[i];
            result.push(temp);
            sum += temp_data[i];
          }
          result.sort(function (a, b) {
            return b.num - a.num;
          });
          // push表头
          let chardata = [];
          chardata.push(["product", "本科⽣"]); //不显示所以乱取名字了
          //计算前n个
          const N = 13;
          let N_SUM = 0;
          for (let index = 0; index < N; index++) {
            let temp = [];
            temp.push(result[index].region);
            temp.push(((result[index].num / sum) * 100).toFixed(2));
            chardata.push(temp);
            N_SUM += result[index].num;
          }
          // 其他
          let temp = [];
          temp.push("其他");
          temp.push((((sum - N_SUM) / sum) * 100).toFixed(2));
          chardata.push(temp);
          this.data = chardata;
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      this.myChart = echarts.init(document.getElementById("tablefour"));
      let that = this;
      this.myChart.setOption({
        dataset: [
          {
            dimensions: ["name", "score"],
            source: that.data,
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "score", order: "desc" },
            },
          },
        ],
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {
          type: "value",
          min: 0,
          interval: 5,
          axisLabel: {
            formatter: "{value}%",
          },
        },
        series: {
          type: "bar",
          encode: { x: "name", y: "score" },
          datasetIndex: 1,
        },
      });
      window.onresize = () => {
        this.myChart.resize();
      };
    },
  },
};
</script>

<style scope></style>
